<template>
    <div class="google-auth-dialog-container">
        <el-dialog :title="state.dialog.title" :close-on-click-modal="false" :close-on-press-escape="false"
            :show-close="false" v-model="state.dialog.isShowDialog" width="769px">
            <div>{{ state.type == 1 ? "您还未绑定谷歌验证请根据以下信息绑定" : "请输入您绑定的谷歌验证码" }}</div>
            <div class="goole_info">


                <template v-if="state.type == 1">
                    <div class="eriwei_div">
                        <div id="qrcode" ref="qrcodeRef"></div>
                    </div>
                    <div class="erwei_code">{{ state.code }}</div>
                </template>


                <el-input class="google_input" v-model="state.googleCode" placeholder="请输入您绑定的谷歌验证"></el-input>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="next()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>



<script setup lang="ts" name="googleAuthDialog">
import { ElMessage } from 'element-plus';
import { nextTick, reactive, watch, ref } from 'vue';


import QRCode from 'qrcodejs2-fixes';


// 导入接口
import { useLoginApi } from "/@/api/login/index";


// 定义变量内容
const qrcodeRef = ref<HTMLElement | null>(null);




const state = reactive({
    type: "" as any,
    code: "",
    address: "",
    googleCode: "",

    dialog: {
        isShowDialog: false,
        type: '',
        title: '谷歌验证',
        submitTxt: '',
    }
});


const setQrCode = () => {
    nextTick(() => {
        (<HTMLElement>qrcodeRef.value).innerHTML = '';
        new QRCode(qrcodeRef.value, {
            text: state.address,
            width: 200,
            height: 200,
            colorDark: '#000000',
            colorLight: '#ffffff',
        });
    });
}


const next = async () => {
    try {
        if (state.googleCode) {
            if (state.type == 1) {
                await useLoginApi().bindUserGoogleSecret(state.googleCode);
                state.googleCode = "";
                state.type = 2;
            } else {
                await useLoginApi().checkCurrentUserGoogleCode(state.googleCode);
                state.googleCode = "";
                window.location.reload();
            }
        } else {
            ElMessage.error("请输入您绑定的谷歌验证码");
        }
    } catch (error: any) {
        ElMessage.error(error.msg);
    }
}

const checkUserGoogleSecretBindStatus = async () => {
    try {
        let tempObj = await useLoginApi().checkUserGoogleSecretBindStatus();
        if (tempObj && !tempObj.GOOGLE_MFA_USER_SECRET_BIND_FLAG) {
            state.type = 1;
            state.code = tempObj.secret;
            state.address = tempObj.secretQRBarcode;
            setQrCode();
        } else {
            state.type = 2;
        }
    } catch (error: any) {
        ElMessage.error(error.msg);
    }
}


watch(
    () => state.dialog.isShowDialog,
    (newValue) => {
        if (newValue == true) {
            // 检查用户的谷歌状态
            checkUserGoogleSecretBindStatus();
        }
    }, { immediate: true }
);





// 打开弹窗
const openDialog = () => {
    state.dialog.isShowDialog = true;
}



// 暴露变量
defineExpose({
    openDialog,
});



</script>


<style lang="scss">
.google-auth-dialog-container {
    .goole_info {
        text-align: center;
        margin-top: 20px;

        .eriwei_div {
            display: inline-block;
            width: 200px;
            height: 200px;
            background: #ccc;
        }

        .erwei_code {
            line-height: 40px;
            font-weight: bold;
        }

        .google_input {
            margin-top: 10px;
            width: 300px;

            input {
                text-align: center !important;
            }
        }
    }

    .dialog-footer {
        text-align: center !important;
        display: flex;
        justify-content: center;
        padding-top: 50px;
    }
}
</style>
